<template>
    <div id="#app">
       <div id="top">
        <van-icon id="icon"  name="checked" /><span>30天无忧退货 </span>
        <van-icon id="icon"  name="checked" /><span>48小时快速退费 </span>
        <van-icon id="icon"  name="checked" /><span>满88元免邮费 </span>
       </div>
       <div id="shangpin">
             
      <p> {{xinpin.name}}</p> 
      <p> {{xinpin.goods_brief}}</p>  
      <p id="hong">  ￥ {{xinpin.retail_price | jiage}} 元</p> 
     
       </div>
       <van-cell id="tcc" is-link @click="showPopup">展示弹出层</van-cell>
       <div id="top1"></div>
       <div id="shangpincanshu"><div id="csxiaohe">商品参数</div>  </div>
       <div id="top1"></div>
       <div id="changjianwenti">
         <div id="cjwz">常见问题</div> 
       </div>
       <div id="wthz" >
        <ul v-for="item in wenti" :key="item.id">
            <li>
               <span id="xiaodian">.</span> <span id="dazi">{{item.question}}</span>
                <div id="xiaozi">{{item.answer}}</div>
            </li>
          
        </ul>
    </div>
    <div id="changjianwenti">
        <div id="cjwz">相关产品</div> 

      </div>
      <van-grid :border="false" :column-num="2" >
        <van-grid-item v-for="item in xgcp" :key="item.id">
          <van-image :src="item.list_pic_url" />
          <div id="xgcpmz">{{item.name}}</div>
          <div id="xgcpjg">￥ {{item.retail_price | jiage()}} 元</div>
        </van-grid-item>
      </van-grid>
     
      
       <van-goods-action>
        <van-popup v-model="show" position="botton" :style="{width:'100%'  ,height: '30%' }">
        </van-popup>
        <van-goods-action v-for="item in jia" :key="item.id">
            
            <van-goods-action-icon icon="star-o" text="未收藏" />
            <van-goods-action-icon icon="cart-o" badge="0" text="购物车" />
            <van-goods-action-button  @click="jias(item.goods_id,item.id,1)" type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
          </van-goods-action>
      </van-goods-action>
    </div>
</template>

<script>
import {Getxinpinshoufa,Getxiangguanchanpin,Getjia} from '../request/app.js'
export default {

    data() {
        return {
            xinpin:{},
            show:false,
            wenti:[],
            xgcp:[],
            jia:[]
        };
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
    mounted() {
        
    },
    created(){
    let {id} = this.$route.params

        Getxinpinshoufa(id).then(res=>{
            console.log(res);
            this.xinpin = res.data.info
            this.wenti = res.data.issue
            this.jia = res.data.productList

        })
        Getxiangguanchanpin(id).then(res=>{
            // console.log(res);
            this.xgcp = res.data.goodsList
        })
    },

    methods: {
        showPopup(){
          this.show = true
        },
        onClickIcon(){

        },
        onClickIcon(){

        },
        onClickButton(){

        },
        jias(id,ids,num){
            // console.log(1);
            Getjia(id,ids,num).then(res=>{
            // console.log(res);
            this.$router.push('/cart')

          })
        }
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
};
</script>

<style  scoped>
    #icon{
        font-size: 15px;
        color:#8B0000;
        line-height: 30px;
    }
    #hong{
        color: #8d0000;
    }
    #top{
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction:row ;
        justify-content: space-between;
    }
    #top1{
        width: 100%;
        height: 20px;
        display: flex;
        flex-direction:row ;
        justify-content: space-between;
    }
    span{
        font-size:15px;
        line-height: 30px;
    }
    #shangpin{
        width: 100%;
        height: 150px;
        background-color:#fff;
        display: flex;
        flex-direction:column;
        
    }
    p{
        text-align: center;   
    }
    #tcc{
        border-top:1px solid rgb(7, 0, 0) ;
    }
    #shangpincanshu{
        width: 100%;
        height:50px ;
        background-color: #ffffff;
    }
    #csxiaohe{
        font-size: 20px;
        margin-left: 15px;
        line-height: 50px;
    }
    #changjianwenti{
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        
    }
    #cjwz{
        margin-top:15px ;
        margin-left: 120px;
    }
    #cjwz::before{
        content: '----';
        width: 80px;
        height: 40px;      

    }
    #cjwz::after{
        content: '----';
        width: 80px;
        height: 40px;
    }
    #wthz{
        width: 100%;
        height: 250px;
        background-color: #fff;
    }
    #dazi{
        font-size: 15px;
        margin-left: 10px;

    }
    #xiaodian{
        margin-left: 10px;
        color:#8B0000;
    
    }
    #xiaozi{
        font-size: 10px;
        white-space: wrap;
        margin-left: 10px;
    }
    #xgcpmz{
        font-size: 10px;
    }
    #xgcpjg{
        font-size: 5px;
        margin-top: 5px;
        color: #8B0000;
    }
</style>